<template>
	<view class="page">
		<u-form :model="form" ref="ref">
			<u-form-item prop="mobile">
				<image class="iconLeft" src="../../static/register/icon_srsjh.png" mode="widthFix"></image>
				<u-input v-model="form.mobile" placeholder="请输入手机号" placeholder-style="color:#373737" />
			</u-form-item>

			<u-form-item prop="code">
				<image class="iconLeft" src="../../static/login/icon_yzm.png" mode="widthFix"></image>
				<u-input v-model="form.code" placeholder="请输入验证码" placeholder-style="color:#373737" />
				<text @click="getCode" class="codetext themeBac cwhite f20">{{tips}}</text>
				<u-toast ref="uToast"></u-toast>
				<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
				</u-verification-code>
			</u-form-item>

			</u-form-item>
		</u-form>
		
		<button @click="toRegister" class="themeBac cwhite mt60">立即绑定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: "",
					code: ""
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
				},
				tips: "",
				seconds: 60
			}
		},
		onReady() {
			this.$refs.ref.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 接口 发送验证码

					setTimeout(() => {
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				}
			},
			toRegister(){
				this.$to("../register/register")
			}
		}
	}
</script>

<style>
	.page{
		padding: 30rpx 70rpx;
	}
	/* 表单 */
	.u-form-item {
		border-bottom: 4rpx solid #707070;
		padding: 0;
		margin-bottom: 20rpx;
	}

	.iconLeft {
		width: 27rpx;
		margin-right: 20rpx;
	}

	.codetext {
		border-radius: 10rpx;
		line-height: 50rpx;
		padding: 0 5rpx;
	}
</style>
